import { Component } from "react";

import TabControl from "./TabControl";

class App extends Component {
  constructor() {
    super()

    this.list = ["ACE", "SaBo", "Luffy"]
    
    this.state = {
      currentTitle: "ACE"
    }
  }

  render() {
    const { currentTitle } = this.state

    return (
      <div>                           {/*2. 穿给子组件*/}
        <TabControl list={this.list} itemChange={index => this.itemChange(index)} />

        <h2>{currentTitle}</h2>
      </div>
    )
  }

  //1.定义函数
  itemChange(index) {
    console.log(index);
    this.setState({
      currentTitle: this.list[index]
    })
  }
}

export default App